<template>
	<view class="entire_com">
		<view>
			<head-list @refresh-page="refreshCurrentPage" :changing="2"></head-list>
		</view>
		<scroll-view scroll-x class="bg-Midnight-Blue nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index==TabCur?'text-cyan curtext':'text-white'"
				v-for="(item,index) in classification" :key="index" @tap="tabSelect" :data-id="index">
				{{item.name}}
			</view>
		</scroll-view>
		<view class="title"> {{title}}
			<view class="title_bottom"></view>
		</view>

		<view v-if="TextList.length == 0"
			style="height: 60vh;width: 100%;background: rgb(13, 46, 100);margin-top: 10rpx;overflow-y: auto;font-size: 16px;text-align: center;line-height: 350rpx;color: #fff;">
			暂无说明
		</view>
		<view v-else style="width: 100%;" :style="{ height: TextList.length < 2 ? '60vh' : 'auto' }">
			<view class="gundong" style="width: 100%;background: rgb(13, 46, 100);margin-top: 20rpx; padding: 20rpx;"
				v-for="(item,index) in TextList" :key="index">
				<view class="flex p-xs margin-bottom-sm mb-sm">
					<view class="flex-sub padding-sm margin-xs radius"
						style="width: 56% !important;padding-left: 0 !important;">
						<view style="font-size: 25rpx;color: #b1c2d7;">{{item.createtime}}</view>
					</view>
				</view>
				<view class="flex p-xs margin-bottom-sm mb-sm" style="margin-top: -50rpx;" @click="textinfo(item)">
					<view class="flex-sub padding-sm margin-xs radius rich-text-container" style="width: 98%;">
						<rich-text selectable="true" class="rich-text"
							style="width: 98%;font-size: 30rpx;color: white;overflow: hidden; text-overflow: ellipsis;"
							:nodes="item.content"></rich-text>
					</view>
				</view>
				<view>
					<view v-for="(img,img_index) in item.file_img" :key="img_index"
						v-if="item.file_img && item.file_img.length > 0"
						style="display: inline-block;width: 30%;height: 180rpx;padding: 0 10rpx;">
						<image style="width: 100%;height: 100%;margin-left: 30rpx;" :src="img" mode="aspectFill"
							@click="tankuang(img,item.file_img)"></image>
					</view>
				</view>




				<view style="display: flex; justify-content: center; align-items: center;"
					v-for="(video,index) in item.file_video" :key="index">
					<video :src="video"></video>
				</view>

				<view v-for="(audio, i) in item.file_audio" :key="i"
					style="display: flex;align-items: center;justify-content: center;margin-top: 10px;">
					<audio :src="audio" controls></audio>
				</view>

				<view v-for="(datafile,ind) in item.file_data" :key="ind">
					<view
						style="color:#26c3dd; padding:10rpx 0 10rpx 20rpx;overflow: hidden;word-wrap: break-word;word-break: break-all;"
						@click="downloadFiles(ind,datafile)">
						{{datafile.filename}}
					</view>
				</view>
				<view style="display: flex;justify-content: left;margin-top: 10px;">
					<button open-type="share" @click.stop="share(item)" class="share_btn"
						style="background-color: #0d4283;width: 60px;padding: 0 5px;">
						<view class='cuIcon-post text-white' style="font-size: 28rpx;">分享</view>
					</button>
				</view>
			</view>
		</view>

		<!-- <view class="video_content">
			<view class="video_row">
				<view :style="{ height: allArrayList.album_count < 3 ? '60vh' : '' , width : '100%' }" class="layout_style">
					<view class="video_first" @click="plan_details(item.id,item.is_member_expire)"
						v-for="(item,index) in allArrayList" :key="index">
						<view class="video_image">
							<image class="video_images" :src="item.cover_image"></image>
						</view>
						<view class="video_info">
							<view class="video_info1">
								{{item.name}}
							</view>
							<view class="video_info2">
								<rich-text style="color: #fff;" :nodes="item.introduction"></rich-text>
							</view>
							<view class="video_info3">
								￥ {{item.membership_price}} <text
									class="video_info3_text">已卖出{{item.quantity_sold}}件</text>
							</view>
						</view>
					</view>
				</view>
				<view style="width: 100%;height: 60vh;background-color: #112858;text-align: center;margin-top: 60rpx;"
					v-if="type == 1 && allArrayList.album_count == 0">
					<text style="color: #fff;font-size: 45rpx;">暂无数据</text>
				</view>
			</view>
		</view> -->
		<fui-loading :isFixed="true" srcCol="/static/loading_white.png" text="正在加载..." v-if="loading"></fui-loading>
		<view style="width: 100%;height: 180rpx;"></view>
	</view>
</template>

<script>
	import { setTabCurrent } from "@/common/swiperTools.js"
	import forum from '@/api/forum.js';
	import HeadList from '@/components/head.vue';
	export default {
		props: ['userinfo', 'minute', 'classification', 'default_video'],
		components: {
			HeadList
		},
		data() {
			return {
				loading: false,
				token: '',
				TabCur: 0,
				scrollLeft: 0,
				video_list: {},
				type: 1,
				title: '成长计划',
				avatar: ['/static/tabbar/defaulthead.jpg', '/static/tabbar/aaa.jpg', '/static/tabbar/bbb.jpg',
					'/static/tabbar/ccc.jpg', '/static/tabbar/ddd.jpg', '/static/tabbar/eee.jpg'
				],
				modalName: null,
				swiperList: [],
				herald: [],
				dotStyle: false,
				isReachedBottom: false,
				page: 1,
				pagetype: 1,
				fid: '',
				postLists: [],
			}
		},
		created() {
			this.fid = uni.getStorageSync('fid');
			const token = uni.getStorageSync('token');
			this.token = token
			if (token == '') {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		computed: {
			// allArrayList() {
			// 	if (this.type == 1) {
			// 		if (this.default_video) {
			// 			return Object.keys(this.default_video).length ? this.default_video.albumList : []
			// 		} else {
			// 			return []
			// 		}
			// 	} else {
			// 		if (this.video_list) {
			// 			return Object.keys(this.video_list).length ? this.video_list.albumList : []
			// 		} else {
			// 			return []
			// 		}
			// 	}
			// }
			TextList() {
				if (this.type == 1) {
					if (this.default_video) {
						return Object.keys(this.default_video).length ? this.default_video : []
					} else {
						return []
					}
				} else {
					if (this.postLists) {
						return Object.keys(this.postLists).length ? this.postLists : []
					} else {
						return []
					}
				}
			}
		},
		methods: {
			setTabCurrent,
			//下载附件
			downloadFiles(index, datafile) {
				const url = datafile.url; // 替换为实际文件的URL
				const fileName = datafile.filename; // 替换为实际文件的名称
				const res = uni.downloadFile({
					url: url,
					success: (downloadResult) => { // 使用箭头函数
						if (downloadResult.statusCode === 200) {
							const tempFilePath = downloadResult.tempFilePath
							console.log(tempFilePath, 888)
							uni.showToast({
								title: '下载成功',
								icon: 'success'
							})
							this.openTempFile(tempFilePath) // 此处的this仍然指向downloadFiles函数
						} else {
							console.error('文件下载失败')
						}
					},
					fail: (error) => { // 使用箭头函数
						console.error('文件下载失败', error)
					}
				})
				res.onProgressUpdate((progress) => {
					console.log('下载进度：' + progress.progress)
				})
			},
			openTempFile(url) {
				wx.openDocument({
					filePath: url,
					success: (res) => { // 使用箭头函数
						console.log('临时文件打开成功')
					},
					fail: (error) => { // 使用箭头函数
						console.error('打开临时文件失败', error)
					}
				})
			},
			textinfo(item) {
				uni.navigateTo({
					url: '/pages/index/text_info?item=' + JSON.stringify(item)
				});
			},
			removeHtmlTags(str) {
				return str.replace(/<[^>]+>/g, '');
			},
			share(item) {
				const url = '/pages/index/text_info?item=' + JSON.stringify(item)
				uni.setStorageSync('url', url);
				if (item.content !== '') {
					uni.setStorageSync('url_text', this.removeHtmlTags(item.content));
				} else {
					uni.setStorageSync('url_text', '');
				}
				if (item.file_img.length !== 0) {
					uni.setStorageSync('url_iamge', item.file_img[0]);
				} else {
					uni.setStorageSync('url_iamge', '');
				}
				uni.setStorageSync('url', url);
			},
			drop_down() {
				this.TabCur = uni.getStorageSync('TabCur');
				this.infoList(uni.getStorageSync('fid'))
			},
			//图片预览
			tankuang(url, arr) {
				uni.previewImage({
					current: url,
					urls: arr,
					loop: true,
				});
			},
			infoList(id) {
				// forum.forumindex({
				// 	token: this.token,
				// 	category_id: id,
				// 	category_type: 'video',
				// 	type: 4,
				// 	Page: 1,
				// 	limit: 5,
				// }).then(res => {
				// 	if (res.msg == "尚未开通会员") {
				// 		this.video_list = []
				// 		this.type = 2
				// 		uni.showModal({
				// 			title: '会员',
				// 			content: '开通会员',
				// 			cancelText: '取消',
				// 			confirmText: '确定',
				// 			success: res => {
				// 				if (res.confirm) {
				// 					uni.navigateTo({
				// 						url: '/pages/membership/membership'
				// 					})
				// 				}
				// 			}
				// 		})
				// 	} else {
				// 		this.video_list = res.data
				// 		this.type = 2
				// 	}
				// })
				this.loading = true
				forum.postGetList({
					channels_id: id,
					page: 1,
					limit: 5,
				}).then(res => {
					this.loading = false
					if (res.code === 1) {
						this.type = 2
						this.postLists = res.data.data
					}
				})
			},
			refreshCurrentPage() {
				this.infoList(uni.getStorageSync('fid'))
			},
			plan_details(id, is_member_expire) {
				if (is_member_expire == 1) {
					uni.showToast({
						title: '尚未开通会员',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: '/pages/component/plan_details'
					});
					uni.setStorageSync('video_id', id);
				}
			},
			tabSelect(e) {
				this.TabCur = e?.currentTarget?.dataset?.id || e;
				this.fid = this.classification[this.TabCur].id
				this.fid_type = 'album'
				uni.setStorageSync('fid', this.fid);
				uni.setStorageSync('fid_type', this.fid_type);
				// forum.forumindex({
				// 	token: this.token,
				// 	category_id: this.classification[this.TabCur].id,
				// 	category_type: 'video',
				// 	type: 4,
				// }).then(res => {
				// 	if (res.msg == "尚未开通会员") {
				// 		this.video_list = []
				// 		uni.showModal({
				// 			title: '会员',
				// 			content: '开通会员',
				// 			cancelText: '取消',
				// 			confirmText: '确定',
				// 			success: res => {
				// 				if (res.confirm) {
				// 					uni.navigateTo({
				// 						url: '/pages/membership/membership'
				// 					})
				// 				}
				// 			}
				// 		})
				// 	} else {
				// 		this.video_list = res.data
				// 	}
				// 	this.type = 2
				// })
				this.loading = true
				forum.postGetList({
					channels_id: this.classification[this.TabCur].id,
					page: 1,
					limit: 5,
				}).then(res => {
					this.loading = false
					if (res.code === 1) {
						this.type = 2
						this.postLists = res.data.data
					}
				})
				this.scrollLeft = ((e?.currentTarget?.dataset?.id || e) - 1) * 60
			},
			myinfo() {
				uni.navigateTo({
					url: '/pages/index/myinfo'
				});
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
				forum.get_management({
					token: this.token,
				}).then(res => {
					if (res.code == 1) {
						this.swiperList = res.data
					}
				})
				forum.getLiveForeshow().then(res => {
					if (res.code == 1) {
						this.herald = res.data
					}
				})
			},
			hideModal(e) {
				this.modalName = null
			},
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},

			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},
			broadcast(type, id) {
				uni.setStorageSync('livetype', type);
				uni.setStorageSync('liveid', id);
				uni.navigateTo({
					url: '/pages/index/livbroadcast'
				});
			},
			//切换标签修改title标题值
			// switchlabels(val){
			// 	 @click="switchlabels(item)"
			// 	console.log(val)
			// 	this.title = val
			// }
			loadMoreData() {
				if (!this.isReachedBottom) {
					this.loadData();
					this.isReachedBottom = true;
					this.refresh_now();
				}
			},
			loadData() {
				setTimeout(() => {
					this.isReachedBottom = false; // 重置状态，以便下次触发加载更多
				}, 1000);
			},
			//下拉加载
			refresh_now() {
				console.log(this.fid, 999)
				// forum.forumindex({
				// 	token: this.token,
				// 	category_id: this.fid,
				// 	category_type: 'video',
				// 	type: 4,
				// 	page: this.page,
				// 	limit: 5,
				// }).then(res => {
				// 	if (res.msg == "尚未开通会员") {
				// 		this.video_list = []
				// 		this.type = 2
				// 		uni.showModal({
				// 			title: '会员',
				// 			content: '开通会员',
				// 			cancelText: '取消',
				// 			confirmText: '确定',
				// 			success: res => {
				// 				if (res.confirm) {
				// 					uni.navigateTo({
				// 						url: '/pages/membership/membership'
				// 					})
				// 				}
				// 			}
				// 		})
				// 	} else {
				// 		this.video_list = res.data
				// 		this.type = 2
				// 	}
				// 	let data = res.data
				// 	this.limits = Math.ceil(res.data['total'] / 5);
				// 	if (this.type !== 2) {
				// 		this.video_list = this.default_array
				// 	}
				// 	for (let i = 0; i < data.length; i++) {
				// 		this.video_list.push(data[i])
				// 	}
				// 	this.type = 2
				// })
				this.loading = true
				if (this.TabCur == 0) {
					this.postLists = this.default_video
				}
				this.page++
				forum.postGetList({
					channels_id: this.classification[this.TabCur].id,
					page: this.page,
					limit: 5,
				}).then(res => {
					this.loading = false
					if (res.code === 1) {
						this.type = 2
						if (this.page > Math.ceil(res.data.total / 5)) {
							uni.showToast({
								title: '暂无更多内容',
								icon: 'none'
							})
						} else {
							this.postLists.push(...res.data.data)
						}
						console.log(this.postLists, '1212')
					}
				})
			},
		}
	}
</script>

<style>
	.title {
		width: 90%;
		height: 60rpx;
		font-size: 40rpx;
		font-weight: bold;
		text-align: left;
		padding-left: 10rpx;
		line-height: 50rpx;
		color: white;
		border-left: 15rpx #1eebe6 solid;
		margin: 50rpx 0 0 50rpx;
		z-index: 9999;
	}

	.title_bottom {
		width: 130rpx;
		height: 20rpx;
		border-radius: 50rpx;
		background-image: linear-gradient(to right, #1794a4, #157088, #123962);
		margin-top: -10rpx;
		margin-left: 10rpx;
		z-index: 9998;
	}

	.aaa {
		width: 60rpx;
		height: 60rpx;
		margin-left: 20rpx;
		background-image: url('/static/tabbar/wen.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

	.entire_com {
		width: 100%;
		/* height: 100vh; */
		background-color: #112858;
	}

	.text {
		color: white;
		margin-left: 30rpx;
	}

	.bgwhite {
		background-color: #112858;
	}

	.curtext {
		text-align: center;
		border-radius: 100rpx;
		border: 4rpx cyan solid;
		background-image: linear-gradient(to right, #0b7284, #0e5070, #0b7284);
	}

	.video_content {
		width: 94%;
		height: 60vh;
		overflow: auto;
		margin: 30rpx auto;
	}

	.video_first {
		width: 49%;
		/* height: 500rpx; */
		background-color: #163762;
		border-radius: 16rpx;
		border: 4rpx #3077AF solid;
		margin-right: 1%;
		margin-top: 20rpx;
	}

	.video_row {
		/* width: 100%; */
		/* display: flex; */
		/* flex-wrap: wrap; */
		/* justify-content: space-between; */
		/* align-items: flex-start; */
		/* margin: auto; */
	}

	.layout_style {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	.video_image {
		width: 92%;
		height: 300rpx;
		margin: 15rpx auto;
	}

	.video_images {
		width: 100%;
		height: 300rpx;
		border-radius: 16rpx;
	}

	.video_info {
		width: 92%;
		height: 150rpx;
		margin: auto;
	}

	.video_info1 {
		font-size: 30rpx;
		font-weight: 600;
		color: #fff;
		padding: 5rpx 0 5rpx 10rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.video_info2 {
		color: #fff;
		padding: 5rpx 0 5rpx 10rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.video_info3 {
		font-size: 30rpx;
		color: #F4C044;
		padding: 5rpx 0 5rpx 10rpx;
	}

	.video_info3_text {
		font-size: 25rpx;
		color: #92A1B5;
		padding: 5rpx 0 5rpx 10rpx;
	}

	.entire_com .nav .cu-item {
		height: 60rpx !important;
		line-height: 60rpx !important;
	}
</style>